<template>
	<view class="container">
		<view class="box">
			<view class="one">
				个人防护用品
			</view>
			<view class="two">
        <view class="checkBox">
          <u-checkbox-group
              v-model="form.checkboxValue"
              placement="column"
          >
            <u-checkbox
                :customStyle="{marginBottom: '8px',padding:'5px 20px',color:'#3c3c3c'}"
                v-for="(item, index) in this.form.checkboxList"
                :key="index"
                :label="item.name"
                :name="item.name"
                :disabled="item.disabled"
            >
            </u-checkbox>
          </u-checkbox-group>
        </view>
			</view>

		</view>
		<view class="butt">
			<u-button type="primary" text="我已阅读,下一步" @click="submit" class='but'></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        form:{
          checkboxValue:[],
          list:[],
          upPages:{},
          checkboxList:[]
        }
		}
	},
    onLoad(option){
      this.form.list = option.form
    },
    mounted(){
		  this.form.list = JSON.parse(this.form.list)
      let msg = this.form.list.grypName.map((e)=>{
        return {name:e, disabled: true}
      })
      this.form.checkboxList = msg
    },
	methods: {
		back(){
			uni.navigateBack({
				delta:1
			})
		},
		submit() {
			uni.navigateTo({
				url:`../protects/protects?form=${JSON.stringify(this.form.list)}`
			})

		}
	}
	}
</script>

<style lang="scss">
	.container {
		padding: 40rpx 24rpx;
		background-color: #f6f6f6;
	}

	.box {
		background-color: #fff;
		padding:  30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;

		.one{

		}
		.two{
			padding:20rpx 0rpx;
			border-bottom: 1rpx solid #f6f6f6;
			margin-bottom: 20rpx;
      .checkBox{
        overflow-y: auto;
        height: 74vh;
        background: #f6f6f6;
        border-radius: 8px;
      }
		}
	}

	.butt {
		margin-top: 30rpx;
		display: flex;
	}
</style>
